<template>
<!-- 个人项目介绍 -->
<div class="person_project">
     <!-- 项目案例 -->
      <div class="project-example">
          <div class="project-title">
                <span class="title-left">项目案例</span>
          </div>
           <div v-if="projectexperience.length==0"  class="no-text">
             <p>暂无项目案例</P>
           </div>
          <div class="project-process border-bottom">
            <div v-for="(item,index) in projectexperience" :key="index">
                <div class="process-p1">  
                  <p>
                    <span>{{item.name}}</span>
                    <span class="circle01"></span>
                  </p> 
                  <p class="p1-2">{{item.projectdt}}</p> 
              </div>
              <!-- 合作单位 -->
              <div class="process-p3">
                  <p>合作单位<span class="circle03"></span></p>
                  <p>{{item.partner}}</p>
              </div>
              <div class="process-p2">
                  <p>项目介绍<span class="circle02"></span></p>
                  <p>{{item.description}}</p>
              </div>
              <div class="process-p2">
                  <p>项目业绩<span class="circle02"></span></p>
                  <p>{{item.performance}}</p>
              </div>
              <!-- 项目图片 -->
              <div class="process-p4">
                    <p>项目图片<span class="circle04"></span></p>
                    <div class="img-box">
                        <!-- <div v-for="(img,index) in item.arrAtlas"  :key="index" v-preview="img" preview-title-enable="false" preview-nav-enable="false">
                           <img v-bind:data-original="img.replace('_ms.','_mx.')" v-bind:src="img" />
                        </div> -->
                         <div>
                                <!-- <img v-bind:data-original="img.replace('_ms.','_mx.')" v-bind:src="img" /> -->
                                <img  v-for="(img,index) in item.arrAtlas" :key="index" :src="img" :preview="item.id" preview-text="上下拖动图片可退出预览">
                        </div>
                    </div>
              </div>
            </div>
          </div>
      </div>
    <!-- 进行项目 -->
    <div class="project-process">
        <!-- 进行项目标题 -->
        <div class="process-title">
            <span class="title-left">进行项目</span>
        </div>
        <div v-if="pagedListData.length==0" class="no-text">
          <p>暂无进行中的项目</P>
        </div>
        <!-- 项目进程列表 -->
          <!-- 项目列表 -->
        <div class="project-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="0" >
            <!-- 每一个收藏的项目 -->
            <div class="project-item" v-for="(item,index) in pagedListData" :key="index">
            <router-link  :to="'/projects/detail/' + item.id" >
                <p class="project-item-1">
                    <span class="item1-left">{{item.name}}</span>
                    <span class="item1-right" v-if="item.status=='招募中'">{{item.status}}</span>
                    <span class="item1-right doing" v-if="item.status=='进行中'">{{item.status}}</span>
                    <span class="item1-right done" v-if="item.status=='已完成'">{{item.status}}</span>
                    <span class="item1-right doing" v-if="item.status=='竞标中'">{{item.status}}</span>
                </p>
                <div class="project-item-2">
                  <p class="project-item-type item">
                    <svg class="icon price-bottom-01" aria-hidden="true">
                        <use xlink:href="#icon-leixing"></use>
                    </svg>
                    <span class="type-special">类型：</span>
                    <span>{{item.type}}</span>
                  </p>
                  <p class="project-item-price item">
                    <span class="price-left" v-if="item.isbargaining">可议价</span>
                    <span class="price-right">￥{{item.price}} 万元</span>
                  </p>
                </div>
                <div class="project-item-2">
                  <p class="project-item-time item">
                      <svg class="icon price-bottom-01" aria-hidden="true">
                          <use xlink:href="#icon-zhouqifuwushiduan"></use>
                      </svg>
                      <span class="type-special">周期：</span>
                      <span>{{item.duration}}</span>
                  </p>
                </div>
                <div class="project-item-3">
                  <p class="item3-left">
                      <span>{{item.hits}} 点击</span>
                      <span class="fenge"></span>
                      <span>{{item.signUpNum}}人报名</span>
                  </p>
                  <p  class="item3-right">
                      <span>{{item.addtime}}</span>
                      <span>发布</span>
                  </p>
                </div>
            </router-link>
            </div>
          <div v-show="loading" class="page-infinite-loading">
            <mt-spinner type="fading-circle"></mt-spinner>
            加载中...
          </div>
          <div v-show="allLoaded" class="page-infinite-data">亲！别拉了我是有底线的</div>
        </div>
    </div>
</div>
</template>
<script>
import { GetProjects } from "@/api/zgz";

export default {
  data() {
    return {
      projectexperience: [],
      pagedListData: [],
      pageindex: 1,
      loading: false, //是否显示加载中
      allLoaded: false, //加载完毕
      totalpage: 0 //总页码
    };
  },
  props: {
    id: Number 
  },
  created: function() {
    this.$nextTick(function() {
      this._getProjects();
    });
  },
  methods: {
     loadMore() {
      //分页加载更多
      if (this.pageindex >= this.totalpage) {
        this.allLoaded = true;
        return;
      }
      this.loading = true;
      setTimeout(() => {
        this.pageindex++;
        GetProjects(
          this.id, this.pageindex
        ).then(res => {
          if (res.StatusCode === 200) {
            this.pagedListData = this.pagedListData.concat(res.Data.PagedList);
          }
        });
        this.loading = false;
      }, 1000);
    },
    // 获取数据
    _getProjects() {
      this.$indicator.open();
      setTimeout(() => {
        GetProjects(this.id, this.pageindex).then(res => {
          if (res.StatusCode === 200) {
            this.projectexperience = res.Data.projectexperience;
            this.totalpage=res.TotalPage;
            this.pagedListData= res.Data.PagedList;
             this.$previewRefresh();
            this.$indicator.close();
            console.log(res.Data.projectexperience);
          }
        });
      }, 400);
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/css/total';
@import '~@/css/projects';

// 公司标题

.project-title {
  height: 58.3px;
  width: 100%;
  padding-left: 12px;
  border-bottom: 1px solid #eeeeee;
  overflow: hidden;
  .title-left {
    line-height: 58.3px;
    font-size: 16px;
    color: #282828;
    font-weight: #282828;
    display: inline-block;
    float: left;
    font-weight: bolder;
  }
  .title-right {
    display: inline-block;
    float: right;
    line-height: 58.3px;
    margin-right: 12px;
    font-size: 12px;
    color: #999999;

    > span {
      display: block;
      float: left;
    }
    > .icon {
      display: block;
      float: left;
      margin-top: 22px;
    }
  }
}
// 每个版块儿底边框设置
.border-bottom {
  border-bottom: 9px solid #f4f4f4;
}
// 项目案例
.project-example {
  .project-process {
    padding: 22px 12px;
    .process-p1 {
      font-size: 16px;
      overflow: hidden;
      padding-bottom: 12px;
      border-left: 1px dashed #d6d6d6;
      > p {
        overflow: hidden;
        margin-left: 12px;
        margin-bottom: 12px;
        color: #999999;
        .circle01 {
          display: block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          border: 1px solid #3887fe;
          margin-top: 3px;
          margin-right: 8.3px;
          background: white;
          position: absolute;
          left: 6.01px;
          margin-top: 0px;
        }
        > :nth-child(1) {
          display: block;
          float: left;
          color: #282828;
          line-height: 18px;

          margin-left: 6px;
        }
        > :nth-child(2) {
          display: block;
          float: right;
          color: #666666;
          line-height: 15px;
          font-size: 12px;
        }
      }
      .p1-2{
        color: #666666;
          line-height: 15px;
          font-size: 12px;
           margin-left: 17px;
      }
    }
    .process-p2 {
      font-size: 14px;
      padding-bottom: 22px;
      border-left: 1px dashed #d6d6d6;
      > p {
        color: #999999;
        margin-bottom: 13px;
        margin-left: 12px;
      }
      > :first-child {
        margin-left: 12px;
        color: #282828;
        margin-bottom: 13px;
        .circle02 {
          display: block;
          width: 8.3px;
          height: 8.3px;
          border-radius: 50%;
          border: 1px solid #d6d6d6;
          margin-top: 3px;
          margin-right: 8.3px;
          background: #d6d6d6;
          position: absolute;
          left: 7.85px;
          margin-top: -14px;
        }
      }
    }
    // 合作单位
    .process-p3 {
      font-size: 14px;
      padding-bottom: 22px;
      border-left: 1px dashed #d6d6d6;
      > p {
        color: #999999;
        margin-bottom: 13px;
        margin-left: 12px;
      }
      > :first-child {
        margin-left: 12px;
        color: #282828;
        margin-bottom: 13px;
        .circle03 {
          display: block;
          width: 8.3px;
          height: 8.3px;
          border-radius: 50%;
          border: 1px solid #d6d6d6;
          margin-top: 3px;
          margin-right: 8.3px;
          background: #d6d6d6;
          position: absolute;
          left: 7.85px;
          margin-top: -15px;
        }
      }
    }
    // 项目图片
    .process-p4 {
      font-size: 14px;
      padding-bottom: 12px;
      border-left: 1px dashed #d6d6d6;
      overflow: hidden;
      > p {
        color: #999999;
        margin-bottom: 13px;
        margin-left: 12px;
      }
      > :first-child {
        margin-left: 12px;
        color: #282828;
        margin-bottom: 13px;
        .circle04 {
          display: block;
          width: 8.3px;
          height: 8.3px;
          border-radius: 50%;
          border: 1px solid #d6d6d6;
          margin-top: 3px;
          margin-right: 8.3px;
          background: #d6d6d6;
          position: absolute;
          left: 7.85px;
          margin-top: -15px;
        }
      }
      .img-box {
        margin-left: 12px;
        overflow: hidden;
        > div {
          display: block;
          width: 110.66px;
          height: 66.66px;
          float: left;
          margin-right: 13px;
          > img {
            @include img-auto;
          }
        }
      }
    }
    // 展开
    .detail-p2 {
      margin-top: 21px;

      color: #999999;
      overflow: hidden;
      > span {
        display: block;
        float: left;
        margin-left: 172.65px;
        font-size: 14px;
      }
      > .icon {
        display: block;
        float: left;
        margin-left: 9px;
        margin-top: 3px;
      }
    }
  }
 
}
// 进行项目
.project-process {
  border-bottom: 10px solid #f4f4f4;
  // 标题
  .process-title {
    height: 58.3px;
    width: 100%;
    padding-left: 12px;
    border-bottom: 1px solid #eeeeee;
    overflow: hidden;
    .title-left {
      line-height: 58.3px;
      font-size: 16px;
      color: #282828;
      font-weight: #282828;
      display: inline-block;
      float: left;
      font-weight: bolder;
    }
    .title-right {
      display: inline-block;
      float: right;
      line-height: 58.3px;
      margin-right: 12px;
      font-size: 12px;
      color: #999999;

      > span {
        display: block;
        float: left;
      }
      > .icon {
        display: block;
        float: left;
        margin-top: 22px;
      }
    }
  }
  // 项目进程列表
  .process-list {
    // 每个项目进程
    .process-item {
      padding: 22px 12px;
      border-bottom: 1px solid #eeeeee;

      > :first-child {
        color: #282828;
        font-size: 16px;
        margin-bottom: 14px;
      }
      > :nth-child(2) {
        color: #999999;
        font-size: 14px;
        > span {
          display: inline-block;
          margin-right: 8px;
        }
      }
      /* 进度条 */
      .tuxing-process {
        margin-top: 22px;
        height: 40px;

        .process-total {
          margin-top: 5px;
          width: 390px;
          height: 8.5px;
          border-radius: 4.25px;
          background: #f3f3f3;
        }
        .process-long {
          width: 200px;
          height: 8.5px;
          background-image: linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent
          );
          background-color: #3887fe;
          background-size: 100%;
          border-radius: 4.25px;
        }
        // 进度条提示
        .process-tips {
          overflow: hidden;
          width: 100%;
          height: 44px;
          margin-top: 14px;
          display: flex;
          text-align: center;
        }
        .process-tips02 {
          width: 20%;
          float: left;

          > :first-child {
            display: block;
            width: 20.6px;
            height: 20.6px;
            border-radius: 50%;
            background: #3887fe;
            color: white;
            padding: 2.83px;
            text-align: left;
            line-height: 10px;
            position: absolute;
            margin-top: -28.3px;
            margin-left: 26.6px;
            border: 3.6px solid #f4f4f4;
          }
          > :last-child {
            color: #666666;
            font-size: 14px;
          }
        }
      }
      .process-visit {
        width: 100%;
        margin-top: 23px;
        overflow: hidden;
        > :first-child {
          float: left;
          color: #ffffff;
          font-size: 12px;
          background: #fd4f00;
          padding: 9px 11px;
        }
        > :last-child {
          float: right;
          line-height: 35.97px;
          margin-top: 10px;
          font-size: 14px;
          color: #999999;
          > span {
            display: block;
            float: left;
          }
          .fenge01 {
            width: 1px;
            height: 12px;
            border: 1px solid #999999;
            display: block;
            float: left;
            margin-top: 11px;
            margin-left: 13px;
            margin-right: 13px;
          }
          .span-last {
            margin-right: 40px;
          }
        }
      }
    }
    // 展开
    .process-open {
      line-height: 54.3px;
      height: 54.3px;
      font-size: 14px;
      color: #999999;
      text-align: center;

      > .icon {
        position: absolute;
        margin-top: 18.585px;
        margin-left: 8px;
      }
    }
  }
}
</style>
